<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../semantic/dist/semantic.min.css">
    <title>semantic-ui-message</title>
    <style>

    </style>
</head>

<body>
    <div class="ui container">
        <h1 class="ui header dividing">Message</h1>

        <div class="ui message">
            <div class="header">课程发布</div>
            <p>我们刚刚发布了 Semantic-UI 的相关课程</p>
        </div>

        <div class="ui message massive compact">
            <div class="header">课程发布</div>
            <p>我们刚刚发布了 Semantic-UI 的相关课程</p>
        </div>

        <div class="ui icon message">
            <i class="ui icon info"></i>
            <div class="content">
                <div class="header">课程发布</div>
                <p>我们刚刚发布了 Semantic UI 的课程</p>
            </div>
        </div>

        <div class="ui message warning">
            <div class="header">您需要先注册会员</div>
            <p>订阅之前，您需要先成为我们的会员并登录</p>
        </div>

        <div class="ui message info">
            <div class="header">您需要通过邮箱验证</div>
            <p>登录您的邮箱，完成验证</p>
        </div>

        <div class="ui message positive">
            <div class="header">订阅成功</div>
            <p>您已经成功订阅了我们的课程</p>
        </div>

        <div class="ui message negative">
            <div class="header">登录失败</div>
            <p>请再次登录</p>
        </div>

        <!-- 你也可以直接使用颜色的词来设置颜色 -->

        <div class="ui message red"> Red </div>

        <div class="ui message icon">
            <i class="icon close"></i>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae porro aspernatur qui, quod, nostrum at! Mollitia cupiditate, dignissimos praesentium optio laboriosam recusandae, minus amet totam, laudantium at perferendis voluptas eaque.</p>
        </div>

    </div>




    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../semantic/dist/semantic.min.js"></script>
    <script>
    $('.message .close').on('click', function(){
        $(this).parent('.message').transition('fly');
    })
    </script>
</body>

</html>
